<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台管理</title>
    <link rel="icon" href="${pageContext.request.contextPath}/lib/static/login/images/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
    <style>

    </style>
</head>
<body>
<div class="layui-fluid">
    <hr class="layui-bg-red">
    <div class="layui-row">
        <div class="layui-col-sm6  layui-col-sm-offset3">
            <form class="layui-form layui-form-pane" lay-filter="userEdit">
                <input type="hidden" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" autofocus required lay-verify="required|username" lay-verType="tips" placeholder="请输入用户名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="hidden" name="deptId">
                    <label class="layui-form-label">部门</label>
                    <div class="layui-input-block">
                        <select id="deptId" name="deptId" required lay-verType="tips" lay-verify="department" lay-filter="selectDept" lay-search>
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" lay-verType="tips" placeholder="请输入姓名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required|password" lay-verType="tips" placeholder="请输入密码" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="mobile" required lay-verify="required|phone" lay-verType="tips" placeholder="请输入手机号" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="text" name="email" required lay-verify="required|email" lay-verType="tips" placeholder="请输入邮箱" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="remark" lay-verType="tips" placeholder="请输入备注" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">启用</label>
                    <div class="layui-input-block">
                        <input type="checkbox" title="是否禁用" name="valid" lay-skin="switch" lay-text="启用|禁用" value="0">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="saveUser">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    var baseUrl = '${pageContext.request.contextPath}/sys/user/';

    /*发送ajax请求访问后台*/
    function sendAjaxPostReq($, param, method) {
        $.post(
            baseUrl + method,
            param,
            function (result) {
                if (result.code == 0) {
                    layer.msg(result.msg, {icon: 1, time: 500}, function () {
                        parent.window.location.reload();
                    });
                } else {
                    layer.msg(result.msg, {icon: 5, anim: 6});
                }
            },
            "json"
        );
    }

    layui.use(['form', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.$;

        /*加载部门信息*/
        function showDeptSelectInfo() {
            var deptId = $("body").find("input[name='deptId']").val();
            $.post(
                baseUrl + "getDeptIdAndName",
                function (result) {
                    var dept = result.data;
                    $.each(dept, function (index, dept) {
                        /*修改时选中状态*/
                        if (dept.id == deptId) {
                            $("#deptId").append("<option selected value='" + dept.id + "'>" + dept.deptName + "</option>");
                        } else {
                            $("#deptId").append("<option value='" + dept.id + "'>" + dept.deptName + "</option>");
                        }
                    });
                    form.render('select');
                    return false;
                },
                "json"
            );
        }

        /*用户名是否唯一标识*/
        var usernameOnlyFlag = true;
        function validateUsernameOnly() {
            var id = $("input[name='id']").val();
            var username = $("body").find("input[name='username']");
            /*如果id不为空（修改时），则不验证用户名唯一性*/
            if (id != "") {
                return;
            }
            username.blur(function () {
                /*重置标识值：避免一次验证不通过后再无法验证通过*/
                usernameOnlyFlag = true;
                var $username = username.val();

                /*验证用户名为空*/
                if (!$username) {
                    layer.tips("用户名为空", "input[name='username']");
                    return;
                }

                $.post(
                    baseUrl + "getUserByUsername",
                    {username: $username},
                    function (result) {
                        /*验证用户名为空*/
                        if (result.code == 1) {
                            layer.tips(result.msg, "input[name='username']");
                            return;
                        }
                        if (result) {
                            layer.tips('用户名已存在', "input[name='username']");
                            usernameOnlyFlag = false;
                        }
                    },
                    "json"
                );
            });
        }

        $(function () {
            /*加载部门信息*/
            showDeptSelectInfo();
            validateUsernameOnly();
        });

        //自定义验证规则
        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符或者中文';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }
            },
            password: [/(.+){6,12}$/, '密码必须6到12位'],
            department: [/^[1-9]\d*$/, '请选择部门'] /*验证正整数*/
        });
        /*表单提交 新增*/
        form.on('submit(saveUser)', function (data) {
            /*用户名存在则阻止提交表单*/
            if (!usernameOnlyFlag) {
                layer.tips('用户名已存在', "input[name='username']");
                return false;
            }
            sendAjaxPostReq($, data.field, "addUser");
            return false;
        });

        /*表单提交 修改*/
        form.on('submit(editUser)', function (data) {
            sendAjaxPostReq($, data.field, "updateUser");
            return false;
        });
    });
</script>
</body>
</html>
